<template>
  <div class="body">
    <el-button @click="update()" type="info" icon="el-icon-refresh-right"></el-button>
    <!-- <el-button type="success" icon="el-icon-plus" @click="handleAdd">添加</el-button>
    <el-button type="primary" icon="el-icon-edit" @click="handleUpdate">编辑</el-button>-->
    <el-button type="danger" @click="del()" icon="el-icon-delete">删除</el-button>
    <el-button type="primary" icon="el-icon-upload2">导出</el-button>
    <el-table
      ref="multipleTable"
      :data="listlist"
      tooltip-effect="dark"
      class="table"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column align="center" prop="guarantee_apply_id" label="序号" width="50"></el-table-column>
      <el-table-column align="center" prop="apply_number" label="申请编号" width="270"></el-table-column>
      <el-table-column align="center" prop="guarantee_apply_number" label="保函编号" width="270"></el-table-column>
      <el-table-column align="center" prop="bidding_number" label="标段编号" width="180"></el-table-column>
      <el-table-column align="center" prop="bidding_name" label="标段名称" width="270"></el-table-column>
      <el-table-column align="center" prop="gtype" label="保函类型" width="80"></el-table-column>
      <el-table-column align="center" prop="margin_amount" label="保函金额" width="110"></el-table-column>
      <el-table-column align="center" prop="apply_company_name" label="申请公司名称" width="160"></el-table-column>
      <el-table-column align="center" prop="handler_name" label="申请人" width="120"></el-table-column>
      <el-table-column align="center" prop="state" label="保函状态" width="80">
        <template
          slot-scope="scope"
        >{{scope.row.state==0?'申请中':scope.row.state==1?'审核中':scope.row.state==2?'审核通过':'审核不通过'}}</template>
      </el-table-column>
      <el-table-column align="center" prop="create_time" label="申请时间" width="110"></el-table-column>
      <el-table-column align="center" prop="create_time" label="到期时间" width="110"></el-table-column>
      <!-- <el-table-column align="center" prop="step" label="工程进度" width="80">
         <template slot-scope="scope">
          {{scope.row.step==0?'申请中':scope.row.step==1?'审核中':scope.row.step==2?'审核通过':'审核不通过'}}
        </template>
      </el-table-column>-->
      <el-table-column align="center" label="操作" width="160">
        <template slot-scope="scope">
          <el-button  size="mini" @click="handleUpdate(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增或修改 -->
    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="序号">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="项目编号">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="担保机构名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,20,30]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { list, guaranteedel } from "@/api/list";
export default {
  data() {
    return {
      listlist: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        name: ""
      },
      // 表单校验
      rules: {},
      params: {
        limit: 10,
        offset: 0,
        keywords: ""
      },
      pagenum: 1,
      user_id: "",
      total: null,
      tableData: [],
      multipleSelection: []
    };
  },

  created() {
    this.lists();
    // this.user_id = sessionStorage.getItem("user_id");
  },
  methods: {
    //页面
    lists() {
      // this.params.user_id = sessionStorage.getItem("user_id");
      list(this.params).then(response => {
        console.log(response);
        this.listlist = response.data.data.rows;
        this.total = response.data.data.total;
      });
    },
    del() {
      let arr = [];
      this.multipleSelection.forEach(item => {
        arr.push(item.proid);
      });
      arr = arr.toString();
      // let user_id = sessionStorage.getItem("user_id");
      guaranteedel({ user_id, ids: arr }).then(res => {
        if (res.data.code == 1) {
          this.$$message.success("删除成功");
          this.lists();
        } else {
          this.$message.error("网络异常,请稍后再试");
        }
      });
    },
    // 刷新
    update() {
      this.$router.go(0);
    },
    // 表单重置
    reset() {
      this.form = {
        name: ""
      };
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    //新增按钮操作
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加档案架";
    },
    //修改
    handleUpdate() {
      this.reset();
      this.open1 = true;
      this.title = "详情";
    },
    //提交按钮
    onSubmit() {
      alert("submit!");
      this.open = false;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.limit = val;
      this.lists();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.offset = parseInt(val - 1) * this.params.limit;
      this.lists();
    }
  }
};
</script>

<style scoped>
.body {
  width: 86vw;
  height: 91vh;
}

.table {
  width: 100%;
  margin-top: 2vh;
}

.block {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
</style>
